<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Tag页</title>
    <meta http-equiv="X-UA-Compatible" content="IE edge">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico?v=5.1.1">

    <link href="/css/tumo.min.css" rel="stylesheet" type="text/css">
    <link href="/css/index.css" rel="stylesheet" type="text/css">
    <link rel="stylesheet" href="/js/vue/element-ui/lib/theme-chalk/index.css">
</head>
<body>
<div class="common-container">
    <div th:replace="layout/header"></div>

    <div class="title">
        <h1>--------标签列表--------</h1>
    </div>
    <!-- 在这里展示标签按钮 -->
    <div class="box">
        <div th:each="tag : ${data}" class="common-container">
            <a th:href="@{'/tag/article/' + ${tag.id}}" class="tag-link">
                <button class="btn-12">
                    <span>Click!</span>
                    <span th:text="${tag.name}"></span>
                </button>
            </a>
        </div>

        <!-- 处理无数据的情况 -->
        <div th:if="${data.isEmpty()}" class="error-message">
            目前暂无数据。
        </div>
    </div>

    <div th:replace="layout/aside"></div>
</div>
<script src="/js/tumo.min.js"></script>
<script src="/js/vue/vue.min.js"></script>
<script src="/js/vue/vue-resource.min.js"></script>
<script src="/js/vue/element-ui/lib/index.js"></script>
</body>
</html>
